import React, { useState } from 'react';
import ProTable from '@ant-design/pro-table';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
// 搜索 表头
import columnsData, { columnsDataType } from './data';
// 模拟的数据
import tableData from '../../mock/tableData';
import { message, Popconfirm, Modal } from 'antd';
import {
  getPageListProcessInstance,
  activateProcessInstance,
  suspendProcessInstance,
} from '../../services/processInstance';
import { ModelView } from 'bsin-workflow-ui';

const ProcessInstance = () => {
  // table 绑定
  const tableRef = React.useRef<ActionType>();
  const [handleModelView, setHandleModelView] = useState(false);
  const [processInstanceId, setProcessInstanceId] = useState('');
  const [processDefinitionId, setProcessDefinitionId] = useState('');
  // 表头数据
  const columns: ProColumns<columnsDataType>[] = columnsData;

  // 操作 确认
  const confirm = async (processInstanceId: string, isSuspended: boolean) => {
    let res;
    if (isSuspended) {
      res = await activateProcessInstance({ processInstanceId });
    } else {
      res = await suspendProcessInstance({ processInstanceId });
    }
    if (res.code == '000000') {
      message.success(`${isSuspended ? '激活' : '挂起'}成功`);
    } else {
      message.error(`${isSuspended ? '激活' : '挂起'}失败`);
    }
    tableRef.current?.reload();
  };

  // 操作 取消
  const onCancel = () => {};

  // 操作行数据 自定义操作行
  const actionRender: any = (text: any, record: any, index: number) => (
    <ul className="ant-list-item-action" style={{ margin: 0 }}>
      <li>
        <Popconfirm
          title={`是否${record.isSuspended ? '激活' : '挂起'}？`}
          okText="是"
          cancelText="否"
          onConfirm={() => confirm(record.id, record.isSuspended)}
          onCancel={onCancel}
        >
          <a onClick={() => {}}>{record.isSuspended ? '激活' : '挂起'}</a>
        </Popconfirm>
        <em className="ant-list-item-action-split"></em>
      </li>
      <li>
        <a
          onClick={() => {
            setHandleModelView(true);
            setProcessInstanceId(record.id);
            setProcessDefinitionId(record.processDefinitionId);
          }}
        >
          流程预览
        </a>
      </li>
    </ul>
  );

  // 自定义数据的表格头部数据
  columns.forEach((item: any) => {
    item.dataIndex === 'action' ? (item.render = actionRender) : undefined;
  });

  return (
    <div>
      {/* Pro表格 */}
      <ProTable<columnsDataType>
        headerTitle="流程实例"
        scroll={{ x: 1000 }}
        actionRef={tableRef}
        bordered
        // 表头
        columns={columns}
        // 请求获取的数据
        request={async (params) => {
          let res = await getPageListProcessInstance({
            ...params,
            pageNum: params.current,
          });
          console.log(res);
          if (res.code !== '000000') {
            message.error('获取流程实例表格信息失败');
          }
          const result = {
            data: res.data.DeployModels,
            total: res.data?.total,
          };
          return result;
        }}
        // defaultData={tableData}
        rowKey="id"
        // 本地存储表格列的显示数据
        columnsState={{
          persistenceKey: 'processInstanceTable',
          persistenceType: 'localStorage',
        }}
        // 搜索框配置
        search={{
          labelWidth: 'auto',
        }}
        // 搜索表单的配置
        form={{
          ignoreRules: false,
        }}
        pagination={{
          pageSize: 5,
        }}
        dateFormatter="string"
      />
      <Modal
        title="流程预览"
        open={handleModelView}
        onCancel={() => setHandleModelView(false)}
        onOk={() => setHandleModelView(false)}
        destroyOnClose
        width={1000}
      >
        <ModelView
          processInstanceId={processInstanceId}
          processDefinitionId={processDefinitionId}
        />
      </Modal>
    </div>
  );
};

export default ProcessInstance;
